import React, { useState, useEffect, useMemo } from 'react';
import './index.less'
import { Input, Cell, Button, Tabs, Image, PullRefresh, List, Loading } from 'react-vant';
import instance from './serive';
import { ClockO } from '@react-vant/icons';
import { history } from 'umi'


const Caipu = () => {
  const [searchdata, setsearchdata] = useState([
    { id: 1, title: '推荐' },
    { id: 2, title: '人气' },
    { id: 3, title: '家常菜' },
    { id: 4, title: '下饭菜' },
  ])
  const [lists, setlists] = useState([])
  const [editflag, seteditflag] = useState(false)
  const [showtimes, setshowtimes] = useState(false)
  const [sousuodata, setsousuodata] = useState([])
  const [cur_index, setcur_index] = useState(0)
  const [finished, setfinished] = useState(false)
  const [searchname, setsearchname] = useState('')
  const [flags, setflags] = useState(true)
  const [nums, setnums] = useState(6)


  useEffect(() => {
    let isMounted = true;
    instance.get('/sxmenu').then(({ data }) => {
      seteditflag(false)
      setlists(data)
      setsousuodata(data)
    })
    return () => {
      isMounted = false;
    };
  }, [editflag])

  function handleedittimes(id, item) {

    instance.post('/edittimes', { id: id }).then(({ code }) => {
      if (code === 200) {
        seteditflag(true)
        history.push('/app/buzhou', { state: item })
      }
    })
  }

  function handlesearchitem(data) {
    let datass = data
    console.log(datass);
    console.log(data);
    if (data === 1) {
      instance.get('/sxmenu', { params: { datas: '人气' } }).then(({ code, data }) => {
        if (code === 200) {
          setlists(data)
        }
      })
    }
    if (data === 0) {
      instance.get('/sxmenu', { params: { datas: '推荐' } }).then(({ code, data }) => {
        if (code === 200) {
          setlists(data)
        }
      })


    }
    if (data === 2) {
      instance.get('/sxmenu', { params: { datas: '家常菜' } }).then(({ code, data }) => {
        if (code === 200) {
          setlists(data)
        }
      })


    }
    if (data === 3) {
      instance.get('/sxmenu', { params: { datas: '下饭菜' } }).then(({ code, data }) => {
        if (code === 200) {
          setlists(data)
        }
      })


    }

  }

  const shopdatas = useMemo(() => {
    return lists.filter(item => {
      return item.title.includes(searchname)
    })
  })

  window.onscroll = function () {
    if (nums <= shopdatas.length - 2) {
      if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 1) {
        setflags(true)
        var timers = setTimeout(() => {
          setnums(nums + 2)
          setflags(false)
          clearTimeout(timers)
        }, 500)
      }
    }
  }

  return console.log(), <div>
    <div className='topbox'>
      <p style={{ padding: '4vw', fontSize: '20px' }}>菜谱</p>
    </div>
    <div>
      <Input
        prefix="🔍"
        style={{ border: '1px solid #F2F2F2', height: '40px', borderRadius: '30px', margin: '15px 0px' }}
        // suffix={<Button size="small" type="primary">发送</Button>}
        placeholder="请输入关键字"
        onChange={(e) => setsearchname(e)}
      />
    </div>
    <div className='mainbox'>
    </div>
    <div style={{ marginTop: '2vw' }}>

      <Tabs onChange={(e) => handlesearchitem(e)} style={{ fontSize: '20px' }} lineWidth='70px' defaultActive={0}>
        {searchdata.map(item => (
          <Tabs.TabPane key={item.id} title={`${item.title}`}>
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
    <div className='listbox'

    >
      {/* <List finished={finished} onLoad={onLoad}> */}
      {shopdatas.slice(0, nums).map(item => {
        return <div
          onClick={() => handleedittimes(item._id, item)}
          key={item._id}
          style={{ marginBottom: '2vh' }}
        >
          <Image

            style={{ width: '140px', height: '130px' }} src={item.imags}></Image>
          <p style={{ margin: '1vh 1vh 0 1vh', fontSize: '16px' }}>{item.title}</p>
          <div className='fenspan'>
            <span style={{ fontSize: '15px' }}>
              <ClockO />
              {
                new Date(item.times).getMinutes() <= 58 ?
                  new Date(item.times).getMinutes() + '分钟' : '一小时以上'

              }

            </span>
            <span>{item.nums}人做过</span>
          </div>

        </div>
      })}
      {/* </List> */}

    </div>
    {flags && <div style={{ textAlign: 'center' }}><Loading size="24px">加载中...</Loading></div>}
    <div style={{ height: '50px' }}>

    </div>
  </div>;
}

export default Caipu;